<template>
	<view>
		<status-bar :title="title"></status-bar>
		<view class="rows p-re">
			<!-- <mp-html :content="ordInfo.order_content" lazy-load scroll-table selectable use-anchor show-with-animation /> -->
			<u-parse
				:content="ordInfo.order_content"
				:domain="$imgUrl"
				:previewImg="false"
				:lazyLoad="true"></u-parse>

			<!-- 头部 -->
			<view class="head d-flex a-center p-left30 p-re">
				<image :src="shareData.imageUrl" mode="aspectFit"></image>
				<view class="right p-left24 d-flex f-column j-sb">
					<view class="color_33 size32">{{ shareData.title }}</view>
					<view class="label white text-center bold">企业认证</view>
				</view>
				<view class="back p-ab size32" @click="back()">返回</view>
			</view>
		</view>

		<!-- 底部 -->
		<view class="subMit d-flex m-top50">
			<view class="left flexac white size36" @click="showFrom = true">{{
				ordInfo.order_title
			}}</view>
			<view class="right flexac bgwhite size36" @click="handleCall">立即咨询</view>
		</view>
		<view class="text-center p-bot50">
			<view class="back size32 m-top50 m-bot50" @click="back()">返回</view>
			<view class="support">慕格提供技术支持</view>
		</view>

		<u-popup :show="showFrom" round="10" closeable @close="showFrom = false">
			<view class="viewbox auto contact">
				<view class="row j-centert size42 bold p-top50">{{ ordInfo.order_name }}</view>
				<fromlist
					:order_id="order_id"
					@submit="showFrom = false"
					:v_id="v_id"
					:VeriCode="VeriCode"
					@cancelUp="showFrom = false">
				</fromlist>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import fromlist from '../components/from/fromlist.vue';
	export default {
		components: {
			fromlist,
		},
		data() {
			return {
				title: '',
				showFrom: false,
				order_id: 2270,
				v_id: '10037599',
				VeriCode: 'O2HNlBw0h*65uRxHlDnq5w==',
				config: [],
				ordInfo: '',
				shareData: uni.getStorageSync('shareData'),
			};
		},
		onLoad() {
			this.customForm();
		},
		methods: {
			customForm() {
				this.$http
					.post({
						url: '/SRA_CustomerForm/customForm',
						data: {
							ordId: this.order_id,
							v_id: this.v_id,
							VeriCode: this.VeriCode,
							source_bid: uni.getStorageSync('bid'),
							source_v_id: uni.getStorageSync('vid'),
							source_open_id: uni.getStorageSync('openid'),
						},
					})
					.then((res) => {
						if (res.code != 100) return this.$Toast(res.data);
						const { config, ordInfo } = res.data;
						this.config = config;
						this.ordInfo = ordInfo;
						this.title = ordInfo.order_name;

						this.ordInfo.order_content = this.$common.richTxt(
							this.ordInfo.order_content
						).html;
					});
			},
			handleCall() {
				uni.makePhoneCall({
					phoneNumber: this.ordInfo.order_tel,
				});
			},
		},
	};
</script>
<style>
	page {
		padding-bottom: constant(safe-area-inset-bottom); /*兼容 IOS<11.2*/
		padding-bottom: env(safe-area-inset-bottom); /*兼容 IOS>11.2*/
	}
</style>
<style lang="scss" scoped>
	.subMit {
		view {
			width: 300rpx;
			height: 100rpx;
			border-radius: 10rpx;
			margin: auto;
		}
		.left {
			background: #155bd4;
		}
		.right {
			color: #606266;
			border: 1rpx solid #c0c4cc;
		}
	}
	.contact {
		max-height: 1000rpx;
		overflow-y: scroll;
		padding-bottom: constant(safe-area-inset-bottom); /*兼容 IOS<11.2*/
		padding-bottom: env(safe-area-inset-bottom); /*兼容 IOS>11.2*/
	}
	.head {
		width: 718rpx;
		height: 174rpx;
		background: rgba(255, 255, 255, 0.6);
		border-radius: 10rpx;
		position: absolute;
		left: 50%;
		margin-left: -359rpx;
		top: 40rpx;
		image {
			width: 100rpx;
			height: 100rpx;
		}
		.right {
			height: 100rpx;
		}
		.label {
			width: 112rpx;
			line-height: 34rpx;
			background: #dd0f10;
		}
		.back {
			line-height: 174rpx;
			top: 0;
			right: 30rpx;
		}
	}
	.back {
		color: #155bd4;
	}
	.support {
		color: #bfbec3;
		font-size: 24rpx;
	}
</style>
